<docs>
  <docs-title> 地图示例一</docs-title>
  <docs-desc>单个配置：tooltip visualMap、series</docs-desc>
 </docs>

<template>
  <chart :options="options"></chart>
</template>

<script>
import chart from "@/echart/map/map1.vue";
import jsonData from "@/data/hubei.json";

export default {
  components: {
    chart
  },
  data() {
    return {
      options: null
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let data = jsonData.features.map(x => {
        let name = x.properties.name;
        let value = Math.round(Math.random() * 400);
        return { name, value };
      });

      this.options = {
        tooltip: {
          formatter:
            "<span class='title'>{b}</span>" +
            "<br/>" +
            " > 值: <span class='value'>{c}</span> 人"
        },
        visualMap: {
          min: 0,
          max: 400,
          formatter: function (value) {
            if (value) {
              return value + "人";
            }
            return value;
          }
        },
        series: [
          {
            type: "map",
            map: "hubei",
            data: data
          }
        ]
      };
    }
  }
};
</script>

<style>
.echarts-tooltip-custom {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #666666;
}

.echarts-tooltip-custom .title {
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #424e67;
}

.echarts-tooltip-custom .value {
  color: rgba(72, 127, 255, 1);
  font-size: 20px;
}
</style>
